// [{id:xxx,title:xxx,topNum:0,downNum:0,addTime:yyyy:mm:dd hh:mm:ss},{id:xxx,title:xxx,topNum:0,downNum:0,addTime:yyyy:mm:dd hh:mm:ss}]
const btn = document.querySelector(".inputs");
const content = document.querySelector("#tijiaoText");
const commentOn= document.querySelector(".commentOn");
const contentList = [];// [{},{}]
btn.onclick = function(){
    const title = content.value.trim();// 收集输入的数据（移除了左右空格）
    if(title.length===0){
        alert("请输入的内容");
        return;
    }
    if(contentList.find(v=>v.title===title)){
        alert("请不要输入相同的内容！");
        return;
    }
    // 收集数据,在数组的头部追加数据
    contentList.unshift({
        // 评论的标题
        title:content.value.trim(),// trim是移除左右空格
        topNum:0,// 顶的数量
        downNum:0,// 踩的数量
        id:Math.random().toString(36).slice(2),
        addTime:getNowTime()
    });
    content.value = null;// 清空

    render();
}
function del(id){
    const index = contentList.findIndex(v=>v.id===id);
    contentList.splice(index, 1);
    render();
}
function up(id,type){
    // type 1:topNum 2:downNum
    // 1- 更改哪个属性？topNum downNum
    // 2- 条件？id
    // console.log(id,type)'
    const info = contentList.find(v=>v.id === id);
    if(type===1) info.topNum++;
    else if(type===2) info.downNum++;

    render();
}
// 更新列表
function render(){
    if(contentList.length==0){
        commentOn.innerHTML=`<div class="noContent">暂无留言</div>`;
        return;
    }
    commentOn.innerHTML = contentList.map(item=>(`
         <div class="messList">
            <div class="reply">
                <p class="replyContent">${item.title}</p>
                <p class="operation">
                    <span class="replyTime">${item.addTime}</span>
                    <span class="handle">
                        <a href="javascript:;" onclick="up('${item.id}',1)" class="top">${item.topNum}</a>
                        <a href="javascript:;" onclick="up('${item.id}',2)" class="down_icon">${item.downNum}</a>
                        <a href="javascript:;" onclick="del('${item.id}')" class="cut">删除</a>
                    </span>
                </p>
            </div>
        </div>
    `)).join("")
}
function getNowTime() {
    const time = Date.now();// 当前的时间戳
    const date = new Date(time);
    return date.getFullYear()+'-'+
        (date.getMonth()+1).toString().padStart(2,0)+'-'+
        date.getDate().toString().padStart(2,0)+" "+
        date.getHours().toString().padStart(2,0)+":"+
        date.getMinutes().toString().padStart(2,0)+":"+
        date.getSeconds().toString().padStart(2,0)
}